<template>
    <div class="wrapper">
        <dl v-for="(item,index) in this.list">
            <dt>
                <img :src="item.imgUrl" alt="">
            </dt>
            <dd>{{item.title}}</dd>
        </dl>



    </div>
</template>
<script>
export default {
    data(){
        return {
            list:null
        }
    },
     mounted(){
        this.axios.get("static/homeData.json").then(res=>{
            this.list=res.data.data[0].iconsList
        })
    }
}
</script>
<style scoped>

.wrapper{
    width: 100%;
    height: 160px;
    display: flex;
    flex-wrap: wrap;
    background: #fff;
}
    dl{
        width: 17.3%;
        height: 70px;
        margin:5px;
        display: flex;
        flex-direction: column;
        justify-content: center;
     
    }
     dt{
          width: 80%;
          height: 70%;  
             margin: 0 auto;
        }
        dt img{
            width: 100%;
            display: block;
            height: 100%;
        }
        dd{
            text-align: center;
        }


</style>

